<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			*{
				margin:0;
				padding:0;
			}
			ul{
				overflow: hidden;
			}
			li{
				list-style: none;
				float:left;
				height:50px;
				width:80px;
				text-align: center;
				line-height:50px;
				background-color: #00FFFF;
			}
			li.active{
				background-color: #0082D6;
			}
			
			.con div{
				height:200px;
				width:240px;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li 
				 v-for="(item,index) in titlearr" 
				:key="index"
				:class="index==num?'active':''"
				@click="tab(index)"
				>
				{{item}}
				</li>
			</ul>
			<div class="con">
				<div 
				v-for="(item,index) in Conarr" 
				:key="index"
				v-show="index==num?true:false"
				>{{item}}</div>
			</div>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					titlearr:["标题一","标题二","标题三"],
					Conarr:["内容一","内容二","内容三"],
					num:0
				},
				methods:{
					tab(index){
						this.num=index;
					}
				}
			})
		</script>
	</body>
</html>
